import React ,{useEffect,useState}from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import { Modal,Form, Input, Button,DatePicker,Select,Divider,LocaleProvider} from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import {Link} from 'react-router-dom'
import { RollbackOutlined} from '@ant-design/icons';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
import {PlusOutlined} from '@ant-design/icons'
import styles from './styles.less'



function setUTMessage(props) { 
    // const { status, backImgList, user,position,utEquipDatas} = props
    const { Option } = Select;
    const type = props.location.search.slice(1)
    console.log(type);
    const { equipInfo, positionInfo, status, newEquipPosition, user } = props
    const {putDataUT} = props
    const [num,setNum] = useState([1])
    const [ouhe,setOuHe] = useState('无耦合')
    const [item,setItem] = useState(0);
    const [AjaxDatas,setAjaxDatas] = useState(null);
    // const [type,setEqType] = useState('UT')
    const [isModalVisible, setIsModalVisible] = useState(false);
    // const [equip, setEquip] = useState({})
    // console.log(equipInfo)
    let equip ={};
    if( status != 'add' ) {
          // console.log(equipInfo);
          if(equipInfo.linkedHashMap) {
            equip = JSON.parse(JSON.stringify(equipInfo.linkedHashMap.utVo2)) 
          }
        }
    
    const showModal = () => {
      setIsModalVisible(true);
    };
  
    const handleOk = () => {
      setIsModalVisible(false);
    //   console.log(AjaxDatas)
    //   putDataFsm(AjaxDatas)
    };
    const selectChange = (value) =>{
        console.log(value)
    }
    const handleCancel = () => {
      setIsModalVisible(false);
    };
    const onFinish = (values) => {
        // console.log('Success:', values);
        // const installTime = moment(values.installTime).format('YYYY/MM/DD')
        // const changeTime = moment(values.changeTime).format('YYYY/MM/DD')
        // console.log(installTime,changeTime)
        // const needValues = values
        if (!values.csnsors) {
          values.csnsors = ',工作探头温度传感器'
        }
        const needValues = values;
        needValues.installTime = moment(values.installTime).format('YYYY-MM-DD')
        needValues.changeTime = moment(values.changeTime).format('YYYY-MM-DD')
        needValues.ouhe = ouhe
        needValues.type = type
        console.log(needValues)
        putDataUT(needValues).then(res=>{
            console.log(res)
            console.log('dasdada')
        })
        console.log(needValues)
        // setAjaxDatas(needValues)
      };
      const selectBefore = (
        <Select defaultValue="1" className="select-before">
          <Option value="1">工作探头温度传感器</Option>
          <Option value="2">基准探头温度传感器</Option>
        </Select>
      );
      const keepSen = (values) =>{

      }
      const formItemLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 8 },
      };
      const deleteSen = (e)=>{
          const nowNum = num;
        num.map((item,index)=>{
            console.log(e)
            if(e === index){
                num.splice(index,1)
                setNum([...num])
            }
            console.log(num)
        })
        // nowNum.filter((_,index)=>index != e)
        // console.log(nowNum)
      }
      const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };
      const handleChange = (value) => {
        console.log(`selected ${value}`);
      }
      const handleOnChange = (value) => {
          console.log(value)
          // setEqType(value)
      }
      const handleAdd = () =>{
        setNum([...num,item])
         
      }
      useEffect(()=>{
        // if( status != 'add' ) {
        //   console.log(equipInfo);
        //   if(equipInfo.linkedHashMap) {
        //     let temp = JSON.parse(JSON.stringify(equipInfo.linkedHashMap.utVo2))  
        //     // console.log(temp);
        //     setEquip(temp)
        //   }
        // }
      },[])
    // console.log(equip.equipId);
    return (<React.Fragment>
                  <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
                  <Divider>UT设备信息</Divider>
                  <div className={styles.backColor}>
                 {/* <Divider>FSM设备信息修改</Divider> */}
                  <Form  
                        autoscroll='false'
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                        >
                        <div className={styles.content}>
                            {/* <Form.Item
                            {...formItemLayout}
                                key={1}
                                label="热点图ID"
                                name="imageId"
                                className={styles.boxStyle3}
                                initialValue="5r0y9ktz"
                            >
                                <Input disabled/>
                            </Form.Item> */}
                            <Form.Item
                            {...formItemLayout}
                                key={1}
                                label="设备名称"
                                name="describe"
                                className={styles.boxStyle3}
                                initialValue={status !== 'add' ? equip.describe : ''}
                                // initialValue={ equip.describe }
                            >
                                <Input/>
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                            key={2}
                                label="CPU序列号"
                                name="utEquipmentId"
                                rules={[{ required: true, message: 'CPU序列号必填！' }]}
                                initialValue={status!='add' ? equip.utEquipmentId : ''}
                                className={styles.boxStyle1}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                            key={3}
                                label="单片机型号"
                                name="singleModelNum"
                                className={styles.boxStyle}
                            >
                                <Input />
                            </Form.Item><Form.Item
                            key={4}
                            {...formItemLayout}
                                label="单片机厂家"
                                name="singleModelFactory"
                                className={styles.boxStyle1}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                            defaultValue="create"
                            key={5}
                                label="设备ID"
                                name="equipId"
                                initialValue={status!='add' ? equip.equipId : 'create'}
                                className={styles.boxStyle}
                            >
                                <Input disabled />
                            </Form.Item><Form.Item
                            {...formItemLayout}
                                label="单位ID"
                                name="unitId"
                                initialValue={user.unitId}
                                className={styles.boxStyle1} 
                            >
                                <Input />
                            </Form.Item><Form.Item
                            {...formItemLayout}
                                label="温度传感器个数"
                                name="sensorNum"
                                className={styles.boxStyle}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="管道原始厚度"
                                name="pipeThickness"
                                initialValue={status!='add' ? equip.pipeThickness: ''}
                                className={styles.boxStyle1}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="探头数"
                                name="probeNum"
                                initialValue={status!='add' ? equip.probeNum: ''}
                                className={styles.boxStyle}
                            >
                                <Input />
                            </Form.Item><Form.Item
                            {...formItemLayout}
                                label="激励模式 PZT EMAT"
                                name="model"
                                // initialValue={status!='add' ? equip.model: ''}
                                initialValue={type}
                                className={styles.boxStyle1}
                            >
                                <Input disabled/>
                            </Form.Item><Form.Item
                            {...formItemLayout}
                                label="探头耦合方式"
                                name="coupMode"
                                initialValue={status!='add' ? equip.coupMode: ''}
                                className={styles.boxStyle}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="DTU厂家"
                                name="dtuCj"
                                className={styles.boxStyle1}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="DTU型号"
                                name="dtuXh"
                                className={styles.boxStyle}
                            >
                                <Input />
                            </Form.Item><Form.Item
                            {...formItemLayout}
                                label="DTU物联卡号"
                                name="dtuKh"
                                className={styles.boxStyle1}
                            >
                                <Input />
                            </Form.Item><Form.Item
                            {...formItemLayout}
                                label="电池板额定功率"
                                name="solarPanelGl"
                                className={styles.boxStyle}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="电池板额定电流"
                                name="solarPanelDl"
                                className={styles.boxStyle1}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="剩余壁厚预值"
                                name="preRest"
                                className={styles.boxStyle}
                            >
                                <Input />
                            </Form.Item><Form.Item
                            {...formItemLayout}
                                label="主控板版本"
                                name="masterVersion"
                                className={styles.boxStyle1}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="安装位置"
                                name="installPosition"
                                rules={[{ required: true, message: '安装位置必填！' }]}
                                initialValue={status!='add' ? equip.address : ''}
                                className={styles.boxStyle}
                            >
                                <Input />
                            </Form.Item><Form.Item
                            {...formItemLayout}
                                label="太阳能电极板"
                                name="solarPanelJgbMj"
                                className={styles.boxStyle1}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item 
                            {...formItemLayout}
                            className={styles.boxStyle}
                            label="安装时间"
                            name="installTime">
                                <LocaleProvider locale={zh_CN}>
                                    <DatePicker defaultValue={status != 'add' ? moment(equip.installTime) : ''}  className={styles.boxStyless}/>
                                </LocaleProvider>
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="是否换版"
                                name="isChangePlate"
                                className={styles.boxStyle1}
                            >
                                <Select defaultValue="0"  style={{ width: 275 }} onChange={handleChange}>
                                    <Option value="1">是</Option>
                                    <Option value="0">否</Option>
                                </Select>
                            </Form.Item>
                            {/* <Form.Item 
                            {...formItemLayout}
                            className={styles.boxStyle}
                            label="换板时间"
                            name="changeTime">
                                <LocaleProvider locale={zh_CN}>
                                    <DatePicker className={styles.boxStyless}/>
                                </LocaleProvider>
                            </Form.Item> */}
                            <Form.Item 
                            {...formItemLayout}
                            className={styles.boxStyle}
                            label="所属单位"
                            initialValue={status != 'add' ? equip.unitName : ''}
                            name="unitName">
                               <Input />
                            </Form.Item>
                           
                            <Form.Item
                            {...formItemLayout}
                                label="参考坐标"
                                name="reference"
                                initialValue="934,700.5"
                                className={styles.boxStyle1}
                            >
                                <Input disabled/>
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="ip地址"
                                name="ip"
                                rules={[{ required: true, message: 'IP地址必填！' }]}
                                initialValue={status != 'add' ? equip.ip : ''}
                                className={styles.boxStyle}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="经度坐标"
                                name="x"
                                initialValue={status !='add' ? equip.x : newEquipPosition.x }
                                className={styles.boxStyle1}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="纬度坐标"
                                name="y"
                                initialValue={status !='add' ? equip.y : newEquipPosition.y }
                                className={styles.boxStyle}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                            {...formItemLayout}
                                label="设备类型"
                                name="type"
                                className={styles.boxStyle1}
                            >
                                <Select defaultValue={type} disabled style={{ width: 275 }} onChange={handleOnChange}>
                                    <Option value="FSM">FSM</Option>
                                    <Option value="PZT">PZT</Option>
                                    <Option value="UT">UT</Option>
                                </Select>
                            </Form.Item>
                            </div>
                        {/* </div> */}
                        <Button className={styles.sensor_button}  type="primary"  onClick={handleAdd}>
                        <PlusOutlined /> 添加传感器
                        </Button>
                        {num.map((item,index)=>{
                        return (<div className={styles.sensor} key = {index}>
                            <Form.Item 
                            {...formItemLayout}
                            className={styles.enStyle}
                            name="csensors"
                            >
                        <Input className={styles.enStyle} addonBefore="传感器 位置及类型" addonAfter={selectBefore}  />
                        {/* <Button type="primary" onClick={keepSen}>
                            保存传感器信息
                        </Button> */}
                        </Form.Item>
                        <Button type="danger" onClick={()=>{deleteSen(index)}}>
                        删除
                        </Button></div>)
                    })}
                       <Form.Item 
                            {...formItemLayout}
                            className={styles.Select_style}
                            label="耦合状况"
                            initialValue={status!='add' ? equip. coupMode: ''}
                            name="ouhe"
                            >
                           <Select style={{ width: 200 }} onChange={selectChange}>
                                <Option value="0">胶耦合</Option>
                                <Option value="1">硬耦合</Option>
                                <Option value="2">无耦合</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                            offset: 8,
                            span: 16,
                            }}
                        >
                            <Button className={styles.submit_button} onClick={showModal} type="primary" htmlType="submit">
                                确定提交
                            </Button>
                        </Form.Item>
                    </Form>
                   
                    </div>   
                    <Modal title="填写信息确认" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                       确定提交以上信息？

                    </Modal>
    </React.Fragment>)
}
const mapStateToProps = (state) =>({
    FSMneedDatas:state.setFSMMessagePage.FSMneedDatas,
    // backImgList: state.equipmentPage.backImgList,
    status: state.setFSMMessagePage.status,
    isSuccess:state.setUTMessagePage.isSuccess,
    equipInfo: state.setUTMessagePage.equipInfo,
    backImgList: state.equipmentPage.backImgList,
    user: state.user,
    newEquipPosition: state.equipmentPage.newEquipPosition
}
)
const mapDispatchToProps = (dispatch) =>(
    {
        keepDatas:dispatch.setFSMMessagePage.keepDatas,
        putDataUT:dispatch.setUTMessagePage.putDataUT,
        getOnePosition:dispatch.setFSMMessagePage.getOnePosition,
    }
)
export default connect(
    mapStateToProps,mapDispatchToProps
)(setUTMessage)